<template>
  <div>
    <BreadCrumbShow />

    <div class="button-outer"></div>

    <!-- 订单信息框 -->
    <el-row type="flex" align="middle" class="detail-out">
      <el-col
        :xs="8"
        :sm="8"
        :md="8"
        :lg="8"
        style="border: 1px solid #ebeef5; height: 190px"
      >
        <div class="order-title">订单信息</div>
        <div class="order-detail" v-if="orderDetail.createdOn">
          <div class="item">
            <label class="item-title">创建时间:</label>
            <span>{{ orderDetail.createdOn }}</span>
          </div>
          <div class="item">
            <label class="item-title">订单编号:</label>
            <span class="item-value">{{ orderDetail.orderNumber }}</span>
          </div>
          <div class="item">
            <label class="item-title">订单类型:</label>
            <span class="item-value">
              <span>
                {{ commonFun.getLabel(allSubType, orderDetail.subType) }}
              </span>
              <span v-if="orderDetail.subType == 1" class="tip">
                {{
                  commonFun.getLabel(
                    borrowSignType,
                    orderDetail.orderBorrowAttrBean.borrowSign
                  )
                }}
              </span>
            </span>
          </div>
          <div class="item" v-if="orderDetail.subType == 5">
            <label class="item-title">窍数量:</label>
            <span class="item-value">{{ boxTotal }}</span>
          </div>

          <div class="item" v-if="orderDetail.subType == 1">
            <label class="item-title">调阅时间:</label>
            <span class="item-value">
              <span>
                {{ orderDetail.deliveryOn }}
              </span>
            </span>
          </div>
          <div class="item" v-if="orderDetail.subType == 1">
            <label class="item-title">调阅地址:</label>
            <span class="item-value">
              <span>
                {{ orderDetail.address || "无" }}
              </span>
            </span>
          </div>

          <div class="item" v-if="orderDetail.type == 1">
            <label class="item-title">存窍时间:</label>
            <span class="item-value"
              ><span>
                {{ orderDetail.deliveryOn }}
              </span></span
            >
          </div>
          <div class="item" v-if="orderDetail.type == 1">
            <label class="item-title">存窍地址:</label>
            <span class="item-value"
              ><span>
                {{ orderDetail.address || "无" }}
              </span></span
            >
          </div>

          <div class="item" v-if="orderDetail.type == 2">
            <label class="item-title">销毁时间:</label>
            <span class="item-value"
              ><span>
                {{ orderDetail.deliveryOn }}
              </span></span
            >
          </div>

          <div class="item">
            <label class="item-title">联系人:</label>
            <span class="item-value"
              >{{ orderDetail.contactName }} ({{
                orderDetail.contactMobile
              }})</span
            >
          </div>
        </div>
      </el-col>
      <el-col
        :xs="16"
        :sm="16"
        :md="16"
        :lg="16"
        style="border: 1px solid #ebeef5; height: 190px; padding: 50px 0"
      >
        <el-steps :active="active" align-center>
          <el-step
            v-for="(step, index) in setSteps()"
            :key="index"
            :title="step.title"
            :description="step.description"
          ></el-step>
        </el-steps>
      </el-col>
    </el-row>
    <!-- 订单记录 -->
    <div class="timeline-card-box" v-if="orderLogList.length > 0">
      <el-card>
        <div class="timeline-box">
          <el-timeline v-if="orderLogList.length > 0">
            <el-timeline-item
              v-for="(activity, index) in orderLogList"
              :key="index"
              :type="index == 0 ? lastType : type"
              :size="index == 0 ? lastSize : size"
              :icon="index == 0 ? lastIcon : icon"
              :timestamp="activity.timestamp"
              placement="top"
              >
              <div class="content">
                <div class="left" v-if="activity.operator">{{ activity.operator }}</div>
                <div class="right">{{ activity.remark }}</div>
              </div>
              </el-timeline-item
            >
          </el-timeline>
        </div>
      </el-card>
    </div>
    <!-- 窍列表显示 -->

    <el-table :data="boxList" style="width: 100%">
      <el-table-column label="类别 | 编号" width="400px">
        <template slot-scope="scope">
          <BoxIconShow :rowInfo="scope.row" @goDetail="goBoxDetail(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="标签" width="600px">
        <template slot-scope="scope">
          <div class="cell-tag">
            <span v-for="(tags, index) in scope.row.boxTagList" :key="index">
              <el-tag
                v-if="index <= 5 && tags.tag.length <= 15"
                class="box-tag mr-5"
                type="info"
                size="small"
              >
                {{ tags.tag }}
              </el-tag>
              <el-tooltip
                class="item"
                effect="light"
                :content="tags.tag"
                placement="top"
              >
                <el-tag
                  v-if="index <= 5 && tags.tag.length > 15"
                  class="box-tag mr-5"
                  type="info"
                  size="small"
                >
                  {{ tags.tag.substring(0, 15) + "..." }}
                </el-tag>
              </el-tooltip>
            </span>
            <el-tag
              type="info"
              size="small"
              class="box-tag more"
              @click="goBoxDetail(scope.row)"
              v-if="scope.row.boxTagList && scope.row.boxTagList.length > 6"
              >......</el-tag
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column label="货位">
        <template slot-scope="scope">
          <!-- <span>{{
            scope.row.depotId == -1
              ? "未分配仓库"
              : scope.row.rackCodeId == -1
              ? "未绑定货位"
              : scope.row.rackCode
          }}</span> -->
          <span @click="showNext(scope.row)" class="hand statusOrange" v-if="scope.row.boxType == 5 && scope.row.userBoxSubBean && scope.row.userBoxSubBean.mainBoxCode">{{scope.row.userBoxSubBean.mainBoxCode }}-{{ scope.row.userBoxSubBean.index}}</span>
          <span v-else>{{scope.row.rackCode && scope.row.rackCode.code}}</span>
        </template>
      </el-table-column>
      <el-table-column label="" width="100px">
        <template slot-scope="scope">
          <!-- <span>{{scope.row.boxStatus}}</span> -->
          <span v-if="scope.row.status !== orderDetail.status">{{ commonFun.getLabel(orderStatus, scope.row.status) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="pageNum < totalPage && boxList.length > 0" @click="showMore()" class="show-more-box"><i class="el-icon-d-arrow-right show-more"></i> 加载更多</div>
  
    <!-- 展示云窍下的档案窍 -->
    <ShowNextBox
      :isShowNextBox.sync="isShowNextBox"
      @closeDialog="closeDialog"
      :showRow="showRow"
      :userBoxList='boxList'
    />
  </div>
</template>

<script>
import { allSubType, borrowSignType, orderStatus } from "@/utils/dictionary.js";
import {
  getOrderDetail,
  getTaglistByUserBoxIds,
  getOrderLog,
  getOrderBoxList,
} from "@/api/access-manage/index";
import BoxIconShow from "@/components/public-style/BoxIconShow";
import ShowNextBox from "@/views/access-manage/components/ShowNextBox.vue";

export default {
  name: "OrderDetail",
  components: {
    BoxIconShow,
    ShowNextBox
  },
  data() {
    return {
      active: 0,
      allSubType: allSubType,
      borrowSignType: borrowSignType,
      orderStatus: orderStatus,
      orderId: "",
      orderDetail: {},
      pageTitle: "订单详情",
      orderLogList: [],
      size: "normal ",
      icon: "",
      type: "",
      lastSize: "large",
      lastType: "primary",
      lastIcon: "el-icon-more",
      boxList: [],
      stepsList: [],
      printData: {
        printable: "printFrom",
        header: "",
        ignore: ["no-print"],
      },
      boxTotal: null,
      totalPage: null,
      pageNum: null,
      isShowNextBox: false,
      showRow: {}
    };
  },
  created() {
    //  this.orderId = this.$route.params.id;
    // this.getOrderDetail();
  },
  mounted() {
    this.orderId = this.$route.params.id;
    this.getOrderDetail();
  },
  methods: {
    showNext(row) {
      this.showRow = row
      // 打开弹窗展示
      this.isShowNextBox = true
    },
    // 关闭弹框
    closeDialog() {
      this.isShowNextBox = false
    },
    // 查看订单详情
    getOrderDetail() {
      new Promise((resolve) => {
        getOrderDetail(this.orderId).then((res) => {
          res.data.createdOn = this.$moment(res.data.createdOn * 1000).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          res.data.updatedOn = this.$moment(res.data.updatedOn * 1000).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          res.data.deliveryOn =
            res.data.deliveryOn &&
            this.$moment(res.data.deliveryOn * 1000).format(
              "YYYY-MM-DD HH:mm:ss"
            );

          this.orderDetail = res.data;
          // 步骤条展示
          this.active = this.orderDetail.status == 3 ? 3 : this.orderDetail.status + 1
          
          this.getOrderLog(res.data.id);
          // 或许 这里 拿订单id 查 窍 获得窍ids
          getOrderBoxList({orderId: this.orderId}, {pageSize: 5, pageNum: 1}).then((res) => {
            if (res.data.length > 0) {
              let ids = [];
              // 记录当前订单中的总窍数 及 已显示的页数
              this.totalPage = Math.ceil(res.total / 5);
              this.pageNum = 1;
              this.boxTotal = res.total

              res.data.map((item) => {
                ids.push(item.userBoxId);
              });

              getTaglistByUserBoxIds(ids).then((tagRes) => {
                res.data.map((item) => {
                  tagRes.data.map((tags) => {
                    if (tags.userBoxId == item.userBoxId) {
                      item["boxTagList"] = tags.tagList.filter(m => m.tag != ';' && m.tag != '；');
                    }
                  });
                });
              });

              setTimeout(() => {
                this.boxList = res.data;
                this.$forceUpdate();
              }, 1500);
            }
          });
        });
      });
    },
    // 展示更多
    showMore() {
      this.pageNum++
      getOrderBoxList({orderId: this.orderId}, {pageSize: 5, pageNum: this.pageNum}).then((res) => {
        if (res.data.length > 0) {
          let ids = [];
          res.data.map((item) => {
            ids.push(item.userBoxId);
          });

          getTaglistByUserBoxIds(ids).then((tagRes) => {
            res.data.map((item) => {
              tagRes.data.map((tags) => {
                if (tags.userBoxId == item.userBoxId) {
                  item["boxTagList"] = tags.tagList.filter(m => m.tag != ';' && m.tag != '；');
                }
              });
            });
          });

          setTimeout(() => {
            this.boxList = this.boxList.concat(res.data);
            this.$forceUpdate();
          }, 500);
        }
      });
    },
    // 给步骤条赋值
    setSteps() {
      let stepsList = [];
      stepsList = [
        { value: 0, title: "待处理", description: "" },
        { value: 1, title: "处理中", description: "" },
        this.orderDetail.status != 3 && {
          value: 2,
          title: "已完成",
          description: "",
        },
        this.orderDetail.status == 3 && {
          value: 3,
          title: "已取消",
          description: "",
        },
      ].filter((v) => v);

      return stepsList;
    },
    // 获得订单操作记录
    getOrderLog(orderId) {
      getOrderLog(orderId).then((res) => {
        res.data &&
          res.data.map((e) => {
            e.timestamp = this.$moment(e.createdOn * 1000).format(
              "YYYY-MM-DD HH:mm:ss"
            );
            e.content = e.nodeName;
          });
        this.orderLogList = res.data || [];
      });
    },
    // 去 窍详情
    goBoxDetail(row) {
      // this.$router.push({
      //   name: "BoxDetail",
      //   params: {
      //     id: row.userBoxId,
      //   },
      // });
      let routeUrl = this.$router.resolve({
        name: "BoxDetail",
        params: { id: row.userBoxId },
      });
      window.open(routeUrl.href, "_blank");
    },
  },
};
</script>

<style lang="scss" scoped>
.button-outer {
  margin: 20px 0;
}
.order-card-outer {
  height: 200px;
}
.order-card {
  display: flex;
  align-items: center;
  height: 100%;
  border: 1px solid rgb(221, 221, 221);
}

.detail-out {
  margin-bottom: 20px;
  .order-title {
    font-size: 14px;
    font-weight: 600;
    background: #f7f7f9;
    padding: 0 15px;
    /* height: 38px; */
    line-height: 38px;
  }
  .order-detail {
    padding-left: 15px;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    .item {
      display: flex;
      line-height: 22px;
      font-size: 12px;
      .item-title {
        display: block;
        width: 70px;
        // text-align: right
        text-align-last: justify;
        margin-right: 6px;
      }

      .item-value {
        .tip {
          color: #f88123;
          margin-left: 3px;
        }
      }
    }
  }
}

.timeline-card-box {
  margin: 20px 0;
  .timeline-box {
    min-height: 100px;
    .content {
      display: flex;
      .left {
        margin-right: 15px;
      }
    }
  }
}

.box-tag {
  margin-bottom: 5px;
}
.more {
  cursor: pointer;
}

.show-more-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  margin-top: 10px;
  cursor: pointer;
  color: #f88123;
  .show-more {
    font-size: 14px;
    font-weight: 600;
    transform: rotate(90deg);
  }
}
</style>
